<template>
  <div>
    <div class="mapTest" :style="mapWindowStyle">
      <div id="map2"></div>
    </div>
  </div>
</template>

<script>
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
import {fromLonLat} from 'ol/proj';
import {Attribution, defaults as defaultControls} from 'ol/control';
// import OSM from 'ol/source/OSM';

export default {
  name: 'OpenLayersDemo',
  components: {
  },
  data() {
    return {
      map2: null,
      url: "",
      attr: "",
      mapWindowStyle: {
        height: '0px'
      }
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    const BeijingCoordinate = fromLonLat([116.46,39.92],'EPSG:3857')
    let WMTSCapabilitiesParser = new WMTSCapabilities();
    let _this = this
    //解析水经注WeServer中间件提供的地图
    fetch('http://localhost/WeServer/wmts?Service=WMTS&Request=GetCapabilities')
        .then(function (response) {
          return response.text();
        })
        .then(function (text) {
          let result = WMTSCapabilitiesParser.read(text);
          const options1 = optionsFromCapabilities(result, {
            layer: 'acimage',//水经注WeServer中间件的全球卫星地图
            matrixSet: 'mercator',//Web墨卡托投影（EPSG-3857）
            maxZoom: 10,
          });
          const options2 = optionsFromCapabilities(result, {
            layer: 'aclabel',//水经注WeServer中间件的全球卫星地图标签层
            matrixSet: 'mercator',
            maxZoom: 10,
          });
          let source1 = new WMTS(options1)
          let source2 = new WMTS(options2)
          source1.setAttributions('卫星图像：TerraMetrics 公司<br />')
          source2.setAttributions('地图数据：Google 公司 GS(2011)6020号')
          let layer1 = new TileLayer({
            opacity: 1,
            source: source1,
          });
          let layer2 = new TileLayer({
            opacity: 1,
            source: source2,
          });

          _this.map2 = new Map({
            target: 'map2',
            layers: [
              layer1,
              layer2,
            ],
            view: new View({
              center: BeijingCoordinate,
              zoom: 5,
            }),
            controls: defaultControls({attribution: true}),
          });
        });

    // // XYZ 切片形式的地图 URL 地址
    // this.url = "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
    // this.attr = '高德地图（©2021 高德软件 GS(2019)6379号 - 甲测资字11002004 - 京ICP证 070711号）';
    //
    // let map2 = L.map("map2", {
    //   minZoom: 3,
    //   maxZoom: 14,
    //   center: [39.92, 116.46],
    //   zoom: 8,
    //   zoomControl: false,
    //   //attributionControl: false,
    //   crs: L.CRS.EPSG3857
    // });
    // const opt = {
    //   attribution: this.attr,
    // }
    // L.tileLayer(this.url, opt).addTo(map2);
    // this.map2 = map2;
  }
}
</script>

<style lang="stylus" scoped>
//@import 'leaflet/dist/leaflet.css'
//@import "leaflet-draw/dist/leaflet.draw.css"
@import 'ol/ol.css'
.mapTest
  border: 1px solid red
  text-align: left
  height 550px
  #map2
    height: 100%
    width: 100%
</style>
